<template>
  <div class="header">
    <div class="tab">
      <div class="tab_left">
        <el-icon>
          <Search />
        </el-icon>
        筛选搜索
      </div>
      <div class="tab_right">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="searchHandle">查询结果</el-button>
      </div>
    </div>
    <el-form :inline="true" :model="orderForm" class="demo-form-inline">
      <el-form-item label="输入搜索:">
        <el-input v-model="orderForm.orderSn" placeholder="订单编号" />
      </el-form-item>
      <el-form-item label="收货人：">
        <el-input placeholder="收货人姓名/手机号码" v-model="orderForm.receiverKeyword" />
      </el-form-item>
      <el-form-item label="提交时间：">
        <ElConfigProvider :locale="zhCn">
          <el-date-picker v-model="orderForm.createTime" type="date" placeholder="请选择时间" size="default"
            value-format="YYYY-M-DD" />
        </ElConfigProvider>
      </el-form-item>
      <el-form-item label="订单状态：">
        <el-select placeholder="全部" clearable v-model="orderForm.status">
          <el-option v-for="(item, index) in orderStates" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单分类：">
        <el-select placeholder="全部" clearable v-model="orderForm.orderType">
          <el-option label="正常订单" :value="0" />
          <el-option label="秒杀订单" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单来源：">
        <el-select placeholder="全部" clearable v-model="orderForm.sourceType">
          <el-option label="PC订单" :value="0" />
          <el-option label="app订单" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  <div class="editUser">
    <div class="editUserLeft">
      <el-icon>
        <Tickets />
      </el-icon>
      <span>数据列表</span>
    </div>
    <div class="editUserRight">
      <el-button @click="router.push('addMenu')">添加</el-button>
    </div>
  </div>
  <div class="formBox">
    <el-table :data="list" style="width: 100%" border table-layout="auto" cell-class-name="align-c"
      select-on-indeterminate @selection-change="selectionChange">
      <el-table-column align="center" type="selection" />
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="orderSn" label="订单编号" />
      <el-table-column label="提交时间">
        <template #default="{ row }">
          <span>{{ formateDate(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memberUsername" label="用户账号" />
      <el-table-column prop="title" label="订单金额">
        <template #default="{ row }">
          <span>{{ "￥" + row.totalAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="支付方法">
        <template #default="{ row }">
          <span>{{ row.payType === 1 ? "支付宝" : "微信" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单来源">
        <template #default="{ row }">
          <span>{{ orderSource(row.sourceType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template #default="{ row }">
          <span>{{ orderState(row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="操作">
        <template #default="{ row }">
          <el-button @click="router.push('orderDetail?id=' + row.id)">查看订单</el-button>
          <el-button type="danger" @click="singleOrderDel(row.id)"
            v-if="row.status === 2 ? false : row.status === 3 ? false : true">删除订单</el-button>
          <el-button v-if="row.status === 2 ? true : row.status === 3 ? true : false"
            @click="showOrderTracking = true">订单跟踪</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <div class="operation">
      <el-select v-model="operationSelect" class="m-2" placeholder="批量操作">
        <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type" />
      </el-select>
      <el-button @click="operationFn" class="operationConfirm" type="primary">确定</el-button>
    </div>
    <ElConfigProvider :locale="zhCn">
      <el-pagination v-model:current-page="orderForm.pageNum" v-model:page-size="orderForm.pageSize"
        :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
    </ElConfigProvider>
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
      <el-input placeholder="收货人姓名/手机号码" v-model="closeNote" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmClose"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <el-dialog v-model="showOrderTracking" title="订单跟踪" width="30%">
    <orderTracking />
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  orderLIstAPI,
  orderOperationCloseAPI,
  orderOperationDelAPI,
  orderOperationDeliveryAPI,
} from "./api";
import useTable from "@/hooks/useTable";
import { useRouter } from "vue-router";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { orderState, orderSource } from "@/utils/orderStates";
import { formateDate } from "@/utils/index";
import orderTracking from "./components/orderTracking.vue";
const router = useRouter();
// 搜索初始数据
const orderForm = ref<orderParams>({
  pageNum: 1,
  pageSize: 10,
  orderSn: null,
  orderType: null,
  createTime: null,
  receiverKeyword: null,
  sourceType: null,
  status: null,
});
// 重置
const reset = () => {
  searchHandle();
};
const orderStates = reactive([
  { name: "待付款", id: 0 },
  { name: "待发货", id: 1 },
  { name: "已发货", id: 2 },
  { name: "已完成", id: 3 },
  { name: "已关闭", id: 4 },
  { name: "无效订单", id: 5 },
]);
const { list, total, pageChangeHandle, pageSizeChangeHandle, searchHandle } =
  useTable(orderLIstAPI, orderForm.value);

// 以选择的数组
const delList = ref<number[]>([]);
const selectionChange = (selection: IOrderList[]) => {
  delList.value = [];
  for (let i = 0; i < selection.length; i++) {
    if (!delList.value.includes(selection[i].id)) {
      delList.value.push(selection[i].id);
    }
  }
  console.log(delList.value);
};
const operationSelect = ref("");
const options = ref([
  { name: "批量发货", type: "delivery" },
  { name: "关闭订单", type: "close" },
  { name: "删除订单", type: "del" },
]);

// 批量操作
const operationFn = () => {
  if (operationSelect.value === "delivery") {
    if (delList.value.length === 0) {
      ElMessage.warning("请选择要操作的订单");
      return;
    }
    orderOperationDeliveryAPI(delList.value).then((res) => {
      if (res.code === 200) {
      }
    });
  } else if (operationSelect.value === "close") {
    if (delList.value.length === 0) {
      ElMessage.warning("请选择要操作的订单");
      return;
    }
    dialogVisible.value = true;
  } else if (operationSelect.value === "del") {
    if (delList.value.length === 0) {
      ElMessage.warning("请选择要操作的订单");
      return;
    }
    ElMessageBox.confirm("是否要进行该删除操作?", "批量删除", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      orderOperationDelAPI([...delList.value]).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          searchHandle();
        }
      });
    });
  } else {
    if (delList.value.length === 0) {
      ElMessage.warning("请选择要操作的订单");
      return;
    }
  }
};

const dialogVisible = ref<boolean>(false);
const closeNote = ref("");
const confirmClose = () => {
  orderOperationCloseAPI([...delList.value], closeNote.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("修改成功");
      searchHandle();
    }
  });
  dialogVisible.value = false;
};

const singleOrderDel = (id: number) => {
  ElMessageBox.confirm("是否要进行该删除操作?", "批量删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    orderOperationDelAPI([id]).then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功");
        searchHandle();
      }
    });
  });
};
// 订单跟踪显示与隐藏
const showOrderTracking = ref<boolean>(false);
</script>
<style lang="less" scoped>
:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}

.header {
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);

  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: bottom 20px;
    ;
  }

  .el-form {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    margin-left: 100px;

    .el-input {
      width: 215px;
    }
  }
}

.editUser {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  align-items: center;
}

.page {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.operationConfirm {
  margin-left: 20px;
}
</style>
